<template>
  <el-pagination
    v-if="pageRequestBody" :current-page="pageRequestBody.current" :page-size="pageRequestBody.size"
    :page-sizes="pageRequestBody.sizes" :total="pageRequestBody.total" layout="total, sizes, prev, pager, next"
    @size-change="handleSizeChange" @current-change="handleCurrentChange"
  />
</template>

<script>

import {createPageRequestBody} from "@/api/system/pagination";

export default {
  name: "BdpPagination",
  props: {
    value: {
      type: Object, default: createPageRequestBody()
    },
    pageFunction: {type: Function, default: null}
  },
  data() {
    return {
      pageRequestBody: this.value
    }
  },
  watch: {
    'value': {
      handler(val) {
        this.pageRequestBody = val
      },
      deep: true,
      immediate: true
    },

    'pageRequestBody': {
      handler(val) {
        this.$emit('input', val)
      },
      deep: true,
      immediate: true
    },
  },
  methods: {
    handleSizeChange(val) {
      this.pageRequestBody.size = val
      this.pageFunction(this.pageRequestBody)
    },

    handleCurrentChange(val) {
      this.pageRequestBody.current = val
      this.pageFunction(this.pageRequestBody)
    }
  }
}
</script>

<style scoped>

</style>
